/*
  学习目标：在jsx中可以在`{}`来使用js表达式
  步骤：
     1. string number - 正常渲染
     2. boolean undefined null - 不会渲染
     3. 引用类型：对象 数组 函数
        对象：❌在虚拟dom的内容中，不能直接渲染对象
        数组：里面的每一项，都会渲染成一个元素
        函数：需要调用，返回什么，就渲染什么
     4. 三元表达式，逻辑运算，jsx本身
*/
import React from 'react';
import ReactDOM from 'react-dom';
/* 
函数本身也是一个对象,所以直接传递会报错
如果是调用了函数，那么返回什么，就渲染什么
*/
const show = true;
function hello(params) {
  return 'hello react';
}
const dom = (
  <div>
    {/* 调用返回就可以渲染了 */}
    <div>{hello()}</div>
    {/* 三元表达式 */}
    <div>{show ? '显示' : ''}</div>
    {/* 逻辑运算 */}
    <div>{show && '显示'}</div>
    {/* jsx本身,一般配合逻辑运算使用 */}
    <div>{show && <span>jsx本身</span>}</div>
  </div>
);

ReactDOM.render(dom, document.getElementById('root'));
